<template>
  <div class="h-full">
    <LangTabs v-model="lang" />
    <div class="mt12 pb20" style="overflow-y: auto; height: calc(100% - 220px)">
      <div class="fs-14 font-600 mb12">{{ $t('goodsPublishStep2.基本信息') }}</div>
      <el-form ref="formRef" :label-width="0" :model="formData" :rules="rules">
        <div class="custom-table">
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.商品标题') }}</div>
            <div class="pb0 custom-table-value">
              <el-form-item
                :prop="'name' + lang"
                v-for="item in langs"
                :key="item"
                v-show="lang === item"
              >
                <el-input
                  v-model="formData['name' + item]"
                  :placeholder="$t('goodsPublishStep2.请输入商品标题')"
                />
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.选择商户') }}</div>
            <div class="pb0 custom-table-value">
              <el-form-item prop="tenantId">
                <el-select
                  v-model="formData.tenantId"
                  :placeholder="$t('goodsPublishStep2.请选择商户')"
                  filterable
                >
                  <el-option
                    v-for="item in sellerList"
                    :key="item.id"
                    :label="item['name' + locale]"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160">{{ $t('goodsPublishStep2.商品分类') }}</div>
            <div class="custom-table-value pb0">
              <div class="flex_aic">
                <div class="fs-12 color-999999">
                  {{ typeLabels.map((v) => v["name" + locale]).join(" > ") }}
                </div>
                <el-button class="ml12 flex-grow-0" @click="chooseType"
                  >{{ $t('goodsPublishStep2.选择商品分类') }}</el-button
                >
              </div>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.封面图') }}</div>
            <div class="custom-table-value pb0">
              <el-form-item prop="image">
                <!-- <UploadFile
                  v-model="formData.image"
                  :limit="1"
                  :file-size="2"
                  :tip="$t('goodsPublishStep2.请上传封面图')"
                  single-mode
                /> -->
                <PickPicture v-model="formData.image" :limit="1" :file-size="10" />
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.轮播图') }}</div>
            <div class="custom-table-value pb0">
              <el-form-item prop="bannerImages">
                <PickPicture v-model="formData.bannerImages" :limit="5" :file-size="10" />
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.商品标签') }}</div>
            <div class="custom-table-value pb0">
              <el-form-item prop="attrs">
                <el-select
                  v-model="formData.attrs"
                  :placeholder="$t('goodsPublishStep2.请选择商品标签')"
                  multiple
                  style="width: 500px"
                  filterable
                >
                  <el-option
                    v-for="item in attrList"
                    :key="item.id"
                    :label="item['name' + locale]"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160 required">{{ $t('goodsPublishStep2.商品发货地') }}</div>
            <div class="custom-table-value pb0">
              <el-form-item
                :prop="'deliveryDetail' + lang"
                v-for="item in langs"
                :key="item"
                v-show="lang === item"
              >
                <el-input
                  v-model="formData['deliveryDetail' + item]"
                  :placeholder="$t('goodsPublishStep2.请输入商品发货地')"
                />
              </el-form-item>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label w-160">{{ $t('goodsPublishStep2.快递运费') }}</div>
            <div class="custom-table-value pb0">
              <div class="flex_aic">
                <el-radio-group v-model="formData.isFree">
                  <el-radio :label="0">{{ $t('goodsPublishStep2.包邮') }}</el-radio>
                  <el-radio :label="1">{{ $t('goodsPublishStep2.不包邮') }}</el-radio>
                </el-radio-group>
                <el-form-item prop="postage" v-if="formData.isFree === 1">
                  <el-input-number
                    v-model="formData.postage"
                    :placeholder="$t('goodsPublishStep2.请输入快递运费')"
                    style="width: 200px"
                    class="ml12"
                    :min="0"
                  >
                    <template #suffix>{{ $t('goodsPublishStep2.元') }}</template>
                  </el-input-number>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>

        <div class="footer flex_aic_jcc">
          <el-button @click="handleBack">{{ $t('goodsPublishStep2.返回') }}</el-button>
          <el-button @click="prev">{{ $t('goodsPublishStep2.上一步') }}</el-button>
          <el-button type="primary" @click="next">{{ $t('goodsPublishStep2.下一步') }}</el-button>
          <!-- <el-button type="primary" @click="handleRelease">{{ $t('goodsPublishStep2.发布') }}</el-button> -->
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, watch, reactive } from "vue";
import { formData, typeLabels, release, releaseStore } from "../releaseStore";
import UploadFile from "@/components/UploadFile.vue";
import { useRouter } from "vue-router";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import i18n from "@/i18n";
import LangTabs from "@/components/langTabs.vue";
import PickPicture from "@/components/PickPicture.vue";

// 获取系统支持的所有语言
const { locale, t } = useI18n();
const langs = reactive(Object.keys(i18n.global.messages.value));
const lang = ref(locale.value);

const router = useRouter();

const formRef = ref(null);
const rules = {
  tenantId: [{ required: true, message: t('goodsPublishStep2.请选择商户') }],
  bannerImages: [{ required: true, message: t('goodsPublishStep2.请上传轮播图') }],
  image: [{ required: true, message: t('goodsPublishStep2.请上传封面图') }],
  attrs: [{ required: true, message: t('goodsPublishStep2.请选择商品属性') }],
  postage: [{ required: true, message: t('goodsPublishStep2.请输入快递运费') }],
};
const attrList = ref([]);
const sellerList = ref([]);

langs.forEach((item) => {
  rules["name" + item] = [{ required: true, message: t('goodsPublishStep2.请输入商品标题') }];
  rules["deliveryDetail" + item] = [
    { required: true, message: t('goodsPublishStep2.请输入商品发货地') },
  ];
  // formData["name" + item] = "";
  // formData["deliveryDetail" + item] = "";
});
const prev = () => {
  releaseStore.step = 0;
};
const next = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      releaseStore.step = 2;
    }
  });
};

const chooseType = () => {
  releaseStore.step = 0;
};

const handleRelease = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      release();
    }
  });
};

const handleBack = () => {
  router.back();
};

const getSellerOptions = () => {
  Api.getTenantList({
    page: 0,
    size: 9999,
    status: 2,
  }).then((res) => {
    sellerList.value = res.data.content || [];
  });
};

// 获取标签列表
const getAttrList = () => {
  Api.skuAttribute_list({
    page: 0,
    size: 9999,
  }).then((res) => {
    attrList.value = res.data.content || [];
  });
};

onMounted(() => {
  getAttrList();
  getSellerOptions();
});

watch(
  () => formData.isFree,
  (newVal) => {
    if (newVal == 0) {
      formData.postage = 0;
    }
  }
);
</script>
<style lang="scss" scoped>
.h-236 {
  height: 236px;
}

.h-35 {
  height: 35px;
}

.border {
  border: 1px dotted #e6e9ee;
}

.active {
  background: rgba(255, 113, 30, 0.1);
  color: var(--el-color-primary);
}

.tips {
  height: 40px;
  border: 1px dotted #ffad2b;
  background: #fffadf;
  color: #ff3710;

  &.hot {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    background: rgba(255, 113, 30, 0.1);
  }
}

.btn {
  display: inline-block;
  margin-top: 16px;
  margin-bottom: 20px;
  padding: 12px 40px;
  border-radius: 2px;
  background: var(--el-color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #e6e9ee;
  background: #fff;
  background: #fff;
  box-shadow: 0 0 20px #bbbbbb26;
}
</style>
